<template>
    <page-container title="人才库">
        <template #extra>
            <el-input 
                v-model="search" 
                placeholder="请输入关键字" 
                style="width: 120px;height: 30px;margin-left: 80px;" 
                clearable
            />
            <el-button 
                style="margin-left: 30px; background-color: #5defc1; color: white" 
                @click="loadTalentList" 
                plain
            >查询</el-button>
        </template>

        <el-table :data="talentList" style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column prop="candidateName" label="姓名" width="120"/>
            <el-table-column prop="phone" label="联系电话" width="120"/>
            <el-table-column prop="email" label="邮箱" width="180"/>
            <el-table-column prop="positionName" label="应聘职位" width="150"/>
            <el-table-column prop="overallEvaluation" label="面试评价" width="150" show-overflow-tooltip>
                <template #default="{ row }">
                    <el-tooltip 
                        :content="row.overallEvaluation" 
                        placement="top" 
                        :hide-after="0"
                    >
                        <span>{{ row.overallEvaluation }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="入库时间" width="150">
                <template #default="{ row }">
                    {{ formatDateTime(row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
                <template #default="scope">
                    <el-button-group>
                      
                            <el-button 
                                type="danger" 
                                :icon="Delete"
                                
                                size="small"
                                @click="handleDelete(scope.row)"
                            >
                                删除
                            </el-button>
               
                    </el-button-group>
                </template>
            </el-table-column>
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
        </el-table>

        <template #pagination>
            <div class="pagination-container">
                <el-pagination
                    v-show="total > 0"
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </template>
    </page-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete } from '@element-plus/icons-vue'
import PageContainer from '@/components/PageContainer.vue'
import { getTalentList, deleteTalent } from '@/api/talent'

const talentList = ref([])
const loading = ref(false)
const search = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const drawerVisible = ref(false)
const currentTalent = ref({})

// 加载人才列表
const loadTalentList = async () => {
    loading.value = true
    try {
        const res = await getTalentList({
            pageNum: currentPage.value,
            pageSize: pageSize.value,
        })
        if (res.code === 200) {
            talentList.value = res.data.records
            total.value = res.data.total
        } else {
            ElMessage.error(res.message || '获取人才列表失败')
        }
    } catch (error) {
        console.error('获取人才列表失败：', error)
        ElMessage.error('获取人才列表失败')
    } finally {
        loading.value = false
    }
}

// 查看简历
const viewResume = (row) => {
    currentTalent.value = row
    drawerVisible.value = true
}

// 处理删除
const handleDelete = async (row) => {
    try {
        await ElMessageBox.confirm(
            '确定要从人才库中删除该人才吗？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )
        
        const res = await deleteTalent(row.tid)
        if (res.code === 200) {
            ElMessage.success('删除成功')
            loadTalentList()
        } else {
            ElMessage.error(res.message || '删除失败')
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除失败：', error)
            ElMessage.error('删除失败')
        }
    }
}

// 获取录用建议的标签类型
const getRecommendationType = (recommendation) => {
    const typeMap = {
        '录用': 'success',
        '备用': 'warning',
        '不录用': 'danger'
    }
    return typeMap[recommendation] || 'info'
}

// 分页处理
const handleSizeChange = (val) => {
    pageSize.value = val
    currentPage.value = 1
    loadTalentList()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    loadTalentList()
}

// 格式化日期
const formatDateTime = (dateStr) => {
    if (!dateStr) return '--'
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    })
}

onMounted(() => {
    loadTalentList()
})
</script>

<style scoped>
.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-button-group {
    display: flex;
    gap: 8px;
}

:deep(.el-descriptions__label) {
    width: 120px;
    font-weight: bold;
}

:deep(.el-descriptions__content) {
    white-space: pre-line;
}
</style>